<template>
  <Maptalks :mapOnLoadCB="mapOnLoadCB"></Maptalks>
  <div class="pane">
    <p @click="replay">Replay</p>
  </div>
</template>

<script>
import Maptalks from "@/components/common/Maptalks.component.vue"
import MapLayerConst from "@/const/MapLayerConst"
import {ref} from "vue";

export default {
  name: "AddAnimatedPolygon.component",
  components: {Maptalks},
  setup() {

    let polygon = ref(null)

    const replay = () => {
      polygon.value.hide();
      //polygon"s animateShow
      polygon.value.animateShow({
        duration: 1500,
        easing: "out"
      }, function (frame) {
        if (frame.state.playState === "finished") {
          console.log("finished");
        }
      });
    }


    let mapOnLoadCB = (map, mapUtil) => {
      let coords = [
        [-0.131049, 51.498568],
        [-0.107049, 51.498568],
        [-0.107049, 51.493568],
        [-0.131049, 51.493568],
        [-0.131049, 51.498568]
      ]
      mapUtil.setView(coords)

      polygon.value = new maptalks.Polygon([coords], {
        visible: false,
        symbol: {
          "lineColor": "#34495e",
          "lineWidth": 2,
          "polygonFill": "rgb(135,196,240)",
          "polygonOpacity": 0.6
        }
      });

      new maptalks.VectorLayer(MapLayerConst.MAP_POLYGON_ANIMATION_LAYER).addGeometry(polygon.value).addTo(map);

      replay();

    };

    return {
      mapOnLoadCB,
      replay
    }
  }
}
</script>

<style scoped lang="less">
.pane {
  background: #34495e;
  line-height: 28px;
  color: #fff;
  z-index: 10;
  position: absolute;
  top: 20px;
  right: 20px;

  p {
    cursor: pointer;
    display: block;
    color: #fff;
    text-align: left;
    padding: 0 10px;
    min-width: 28px;
    min-height: 28px;
    float: left
  }
}
</style>
